<template>
  <el-dialog :visible.sync="visible"
             :close-on-click-modal="false"
             @close="dialogClose"
             :append-to-body="true"
             class="company-list-dialog">
    <!-- title="选择公司" -->
    <el-form :model="getCompanyListParam"
             label-width="60px">
      <el-row class="show-dialog-style">
        <el-col :span="5">
          &nbsp;
        </el-col>
        <el-col :span="8">
          <el-select v-model="getCompanyListParam.company_type"
                     @change="onCompanyList">
            <el-option v-for="item in companyTypeList"
                       :key="item.code_id"
                       :label="item.name"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-input v-model="getCompanyListParam.company_name"
                    placeholder="请输入公司名称">
          </el-input>
        </el-col>
        <el-col :span="3">
          <el-button @click="searchCompanyList"
                     type="primary"
                     id="headLeftSelect">搜索</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="companyList.list"
              ref="companyList"
              @row-click="selectCompany"
              height="310"
              class="show-table-style"
              :header-cell-style="{background:'#f5f5f5'}"
              :highlight-current-row="chooseType==='row'">
      <!-- <el-table-column prop="company_type_name"
                         label="单位类型">
        </el-table-column> -->
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="company_name"
                       label="单位名称"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="addr"
                       label="单位地址"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="contact_name"
                       label="负责人"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="contact_phone"
                       label="联系电话"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="create_date"
                       label="入驻时间"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <el-pagination id="pagination"
                   class="list-pagination"
                   @current-change="handleCompanyCurrentChange"
                   :current-page="getCompanyListParam.page"
                   :page-sizes="[10]"
                   :page-size="getCompanyListParam.page_size"
                   background
                   layout="total,sizes,prev, pager, next, jumper"
                   :total="companyList.total_count">
    </el-pagination>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="dialogClose"
                 id="back-style">取消</el-button>
      <el-button type="primary"
                 @click="confirmChooseCompany"
                 id="headLeftSelect">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { OBSManageApi } from '@/services/orgainzeManage'
export default {
  data () {
    return {
      visible: false,
      // 获取单位列表参数
      getCompanyListParam: {
        company_type: '',
        company_name: '',
        is_page: 1,
        page: 1,
        page_size: 10
      },
      // 单位列表
      companyList: {
        list: []
      },
      // 单位类型列表
      companyTypeList: [{ name: '全部', value: '' }],
      choosedCompany: {}
    }
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    choose: {
      type: Function
    },
    // 类型，点击行还是复选框
    chooseType: {
      type: String,
      default: 'row'
    }
  },
  watch: {
    dialogVisible (newval) {
      this.visible = newval
    }
  },
  methods: {
    // 选择单位右上角关闭事件
    handleClose (done) {
      done()
      // 清空记忆值
      this.getCompanyListParam.company_type = ''
      this.getCompanyListParam.company_name = ''
      this.getCompanyListParam.page = 1
    },
    // 公司列表分页跳转
    handleCompanyCurrentChange (current) {
      this.getCompanyListParam.page = current
      this.getCompanyList()
    },
    // 公司列表筛选事件
    onCompanyList () {
      this.searchCompanyList()
    },
    // 搜索公司列表
    searchCompanyList () {
      this.getCompanyListParam.page = 1
      this.getCompanyList()
    },
    // 获取公司列表
    getCompanyList () {
      OBSManageApi.getCompanyList({
        params: this.getCompanyListParam
      }).then(res => {
        // console.log(res, 'get company list')
        if (res.code === 0) {
          this.companyList = res.data
        }
      })
    },
    // 获取公司类型列表
    getCompanyTypeList () {
      OBSManageApi.getCompanyTypeList({
        params: {
          code_type: 'companyType',
          is_page: 0
        }
      }).then(res => {
        if (res.code === 0) {
          this.companyTypeList = res.data.list
          this.companyTypeList.unshift({ name: '全部', value: '' })
        }
      })
    },
    // 关闭弹框
    dialogClose () {
      this.getCompanyListParam.company_type = ''
      this.getCompanyListParam.company_name = ''
      this.getCompanyListParam.page = 1
      this.$emit('update:dialogVisible', false)
    },
    // 公司列表选择行
    selectCompany (row) {
      this.choosedCompany = row
    },
    // 在弹框中确定选择某行数据
    confirmChooseCompany () {
      if (this.chooseType === 'row') {
        if (!this.choosedCompany.company_id) {
          this.$message('请先选中数据!')
        } else {
          this.$emit('choose', this.choosedCompany)
          this.dialogClose()
        }
      } else {
        let selection = this.$refs.companyList.selection
        if (selection.length === 0) {
          this.$message.warning('请选择公司')
        } else {
          this.$emit('choose', selection)
          this.dialogClose()
        }

      }

    }
  },
  created () {
    this.getCompanyTypeList()
    this.getCompanyList()
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
.company-list-dialog {
  .show-dialog-style {
  }
  .show-table-style {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .list-pagination {
    text-align: center;
  }
  .dialog-footer {
    text-align: center;
  }
}
</style>
